<%@page import="java.util.List"%>
<%@page import="com.metacube.questionbank.model.User"%>
<div class="container users">
	<h4>Users</h4>
	<hr>	
	<div id="names_filter">
		<h3>Type name to search</h3>		
		<form method="get" action="user_search.htm"> 
			<input type="text" name="namefilter" id="namefilter" placeholder="name">
			<input type="submit" value="Search">
		</form>
	</div>
	<div id="names_list" class="jplist clearfix">
		<div class="jplist-panel panel-top clearfix" style="margin-bottom: 10px;">
			<div class="jplist-label" data-type="Page {current} of {pages}"
				data-control-type="pagination-info" data-control-name="paging"
				data-control-action="paging">
			</div>
			<div class="jplist-pagination" data-control-type="pagination"
				data-control-name="paging" data-control-action="paging"
				data-items-per-page="12">
			</div>
		</div>
		<div class="list text-shadow clearfix">
			<%	
				List<User> users = (List<User>) request.getAttribute("users");
				for (User q : users) {			
			%>
			<div class="list-item">
				<div id="<%=q.getName()%>" class="col-md-4 name_dv">
					<div>
						<ul>
							<li><img src="getImageById.htm?id=<%=q.getUser_id()%>"  width="50px" height="50px" alt="img"></li>
							<li><a href="ReadByOthersprofile.htm?id=<%=q.getUser_id()%>" title="name" rel="name"><% out.print(q.getName());%></a><span id="userRank"><% out.print(q.getRating()); %></span> </li>					
						</ul>
					</div>
					<div class="description">
						<% out.print(q.getAbout_me()); %>
					</div>
				</div>
			</div>
			<% } %>
		</div>
		<div class="jplist-no-results text-shadow align-center">
			<p>No results found</p>
		</div>
		<!-- panel -->
		<div class="jplist-panel panel-bottom clearfix">
			
			<div 
			   class="jplist-label" 
			   data-type="{start} - {end} of {all}"
			   data-control-type="pagination-info" 
			   data-control-name="paging" 
			   data-control-action="paging">
			</div>
			
			<div 
			   class="jplist-pagination" 
			   data-control-type="pagination" 
			   data-control-name="paging" 
			   data-control-action="paging"
			   data-items-per-page="12">
			</div>
			
		</div>
	</div>	
</div>
<script>
	$('document').ready(function() {

		$('#names_list').jplist({
			itemsBox : '.list',
			itemPath : '.list-item',
			panelPath : '.jplist-panel'
		});
	});
</script>